<template>
  <div class="classify">
    <div class="car">
      <div class="form">

        <div @click="imgupload" class="upload">
          <div class="icon"><i class="el-icon-picture-outline"></i></div>
          <div class="text" v-if="!img">
            
            <div class="up_text">上传图片</div>
            <div class="warning_text">
            只能上传一张
            </div>
            </div>
          
          <img :src="img" class="img">
           <input @change="imgChange" type="file" class="imageInput" accept="image/*">
        </div>
        <div class="form_item">
          <div class="label ">选材分类：</div>
          <div class="value classify_item">
            {{ classfication }}
            <div class="con">
              <ul>
                <li v-for="item,i in list" :key="i" @click="kindChoose(item)" >{{ item.name }}</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="form_item">
          <div class="label">物品名称：</div>
          <div class="value">
            <input type="text" v-model='objectname'>
          </div>
        </div>
        <div class="form_item">
          <div class="label">购买时间：</div>
          <div class="value">
            <input type="text" v-model='maturity_time'>
          </div>
        </div>
  
   
        <div class="form_item">
          <div class="label">存放地：</div>
          <div class="value">
            <input type="text" v-model='place'>
          </div>
        </div>
        <div class="form_item">
          <div class="label">数量：</div>
          <div class="value">
            <input type="text" v-model="count">
          </div>
        </div>
        <div class="form_item">
          <div class="label" >价格：</div>
          <div class="value">
            <input type="text" v-model='price'>
          </div>
        </div>
        <div class="form_item">
          <div class="label">备注：</div>
          <div class="value">
            <input type="text" v-model='remarks'>
          </div>
        </div>
        <div class="submit" @click="objectUp">
         提交
        </div>
      </div>
    </div>
  </div>
</template>

<script>


export default {
  name: "classifyView",
  data(){
    return{
      img:"",//图片地址
      imgFile:'',//图片给后端的图片文件
      classfication:'',
      count:null,
      place:'',
      price:'',
      remarks:'',
      maturity_time:'',
      objectname:'',
      list: [
        { name: '食物', },

        { name: '衣服', },
        { name: '图书', },
        { name: '日用品', },
        { name: '化妆品', },
        { name: '其他', },
      ]

    }
  },
  methods:{
    imgupload(){
      document.querySelector(".imageInput").click()
    },
    imgChange(e){
       console.log(e.target.files[0])
       this.imgFile=e.target.files[0]
       const reader = new FileReader()
       localStorage.setItem("imgFile",e.target.files[0])
        reader.readAsDataURL(e.target.files[0])
        reader.addEventListener('load', () => {
          this.img = reader.result
        })


    },
   
    kindChoose(e) {
      this.classfication = e.name;
    },

    async objectUp(){
      if(   this.img==""||
        this.imgFile==''||
        this.classfication==''||
        this.count==null||
        this.place==''||
        this.price==''||
        this.remarks==''||
        this.maturity_time==''||
        this.objectname==''){
          this.$message.warning('未填写完整')
        }else{
          let formdata=new FormData()
          formdata.append( 'img',this.imgFile)
          formdata.append(  'classfication',this.classfication)
          formdata.append( 'count',Number(this.count))
          formdata.append( 'place',this.place)
          formdata.append(  'price',this.price)
          formdata.append('remarks',this.remarks)
          formdata.append( 'maturity_time',this.maturity_time)
          formdata.append(  'objectname',this.objectname)
          formdata.append(  'user_id',Number(localStorage.user_id))
          const resp=await this.$http.post("/object/insert",formdata)
          if(resp.data.state==true)
          {
            this.$message.success('添加成功')
            this.img="",//图片地址
            this.imgFile='',//图片给后端的图片文件
            this.classfication='',
            this.count=null,
            this.place='',
            this.price='',
            this.remarks='',
            this.maturity_time='',
            this.objectname=''
          }else{
            this.$message.error(resp.data.message)
          }
          console.log("resp",resp)
        }

             

    }
  },
  created(){

  }
}
</script>

<style lang="less" scoped>
.classify {
  .submit{
    display:flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    margin-top: 40px;
    height: 60px;
    background: #FFFFFF;
    border-radius: 16px;
    font-weight: 400;
    font-size: 32px;
    color: #000000;
    // overflow: hidden;
    padding: 0 20px;
  }
  .submit:hover{
    background-color: #d3d1d1;
  }
  .car {
    // background: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), #D9D9D9;
    // opacity: 0.6;
    margin: 0 auto;
    margin-top: 40px;
    width: 600px;
    background-color: rgba(255, 255, 255, .2);
    border-radius: 16px;
    padding: 0 100px;
    .form {
      padding: 40px 0;
      .form_item {
        // margin: 40px 0;
        font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        margin-top: 40px;
        height: 60px;
        background: #FFFFFF;
        border-radius: 16px;
        font-weight: 400;
        font-size: 32px;
        color: #000000;
        display: flex;
        align-items: center;
        // overflow: hidden;
        padding: 0 20px;
    
        .label {
          width: 160px;
        }
        .value {
          flex: 1;
          height: 100%;
          text-align: center;
          input {
            width: 100%;
            height: 100%;
            border: none;
            padding: 0;
            margin: 0;
            font-size: 32px;
          }
        }
        .classify_item {
          position: relative;
          line-height: 60px;
          .con {
            display: none;
            position: absolute;
            background: #fff;
            top: 60px;
            left: 0;
            width: 100%;
          
            ul {
              padding: 0;
              margin: 0;
              li {
                list-style: none;
                height: 60px;
              }
              li:hover{
                background-color: #dbd8d8;
              }
            }
          }
        }
        .classify_item:hover .con{
          display: block;
        }
      }
      .upload {
        border-radius: 16px;
        background: #000;
        display: flex;
        align-items: center;
        color: #fff;
        font-weight: 400;
        font-size: 48px;
        padding: 10px 20px;
        cursor: pointer;
        .icon {
          font-size: 150px;
          padding-right:20px;
        }
        .text{
          flex: 1;
          text-align: center;

          .text {
         
          }
          .warning_text{
            font-size: 10px;
          }
        }
        .imageInput{
          display:none;
          background-color: #fff;
        }
        .img{
          // width:200px;
          height:150px;
          border-radius: 8px;
        }
      }
    }
  }
}
</style>
